import {
  ColorSwatch,
  ColorInput,
  Group,
  Flex,
  Badge,
  Box,
  Overlay,
  Modal,
  Table,
  Checkbox,
  Pagination,
  Image,
  Paper,
  Text,
  Grid,
  SimpleGrid,
  Center,
  LoadingOverlay,
  ActionIcon,
  Tooltip,
  TextInput,
  Button,
  Space,
} from "@mantine/core";
import PageLayout from "@/components/PageLayout";
import { useState, useEffect } from "react";
import { Alert } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";
import { Radar, Line } from "@ant-design/plots";

import { useLocation } from "react-router-dom";
import _, { map } from "lodash";
import { useInterval } from "@mantine/hooks";
import { useForm } from "@mantine/form";
import { useAPIUtils } from "@/components/APIUtilsProvider";
import { IconPlus, IconReload } from "@tabler/icons-react";
import { notifications } from "@mantine/notifications";
import { useTabbyData } from "@/hooks/useTabbyData";
import { useTabbyForm } from "@/hooks/useTabbyForm";
import { useImmer } from "use-immer";
import dayjs from "dayjs";

export default function EnvironmentMonitorGraphs() {
  const { pathname } = useLocation();
  const areas = ["一楼办公区", "二楼办公区", "会议室", "公共休息区"];

  return (
    <PageLayout title={"办公环境监控 Office Environment"}>
      <Alert variant="light" title="提示" icon={<IconInfoCircle />}>
        图表是极富有表现力的页面元素，可以帮助用户迅速解读数据，形成整体认知。
        实时温度曲线需要一段时间加载。
      </Alert>
      <Grid w={"94%"}>
        <Grid.Col span={{ base: 12, lg: 8 }}>
          <Text ta={"center"} mt={24}>
            实时温度曲线
          </Text>
          <EnvironmentLines areas={areas} />
        </Grid.Col>
        <Grid.Col span={{ base: 12, lg: 4 }}>
          <Text ta={"center"} mt={24}>
            办公舒适度综合评价
          </Text>
          <Center>
            <SimpleGrid cols={2}>
              {areas.map((area, i) => (
                <EnvironmentRadar title={area} key={i} />
              ))}
            </SimpleGrid>
          </Center>
        </Grid.Col>
      </Grid>
    </PageLayout>
  );
}

function EnvironmentRadar({ title }) {
  const data = [
    { name: "温度适宜性", star: 5 },
    { name: "湿度适宜性", star: 4.5 },
    { name: "PM2.5", star: 3 },
    { name: "噪声控制", star: 2 },
    { name: "低碳节能", star: 3.7 },
    { name: "亮度适宜性", star: 4.2 },
  ];

  const config = {
    data: data.map(({ name }) => ({
      name,
      value: 2 * Math.random().toFixed(2) + 3,
    })),
    width: 200,
    height: 200,
    xField: "name",
    yField: "value",

    area: {
      style: {
        fillOpacity: 0.2,
      },
    },

    scale: {
      x: {
        padding: 0.5,
        align: 0,
      },
      y: {
        type: "linear",
        domain: [0, 5],
        nice: true,
      },
    },
    axis: {
      x: {
        title: false,
        grid: true,
      },
      y: {
        gridAreaFill: "rgba(0, 0, 0, 0.04)",
        label: false,
        title: false,
      },
    },
  };
  return (
    <Box h={200}>
      <Radar {...config} />
      <Text ta={"center"} c={"dimmed"} size="sm">
        {title}
      </Text>
    </Box>
  );
}

const EnvironmentLines = ({ areas }) => {
  const [data, setData] = useImmer([]);
  const interval = useInterval(
    () =>
      setData((draft) => {
        let now = new Date();
        let epochMillis = now.getTime();

        let newData = areas.map((area) => ({
          date: now,
          area,
          value: Math.random().toFixed(1) * 9 + 18,
        }));

        return draft
          .concat(newData)
          .filter(({ date }) => epochMillis - date.getTime() < 60 * 1000);
      }),
    3000
  );
  useEffect(() => {
    interval.start();
    return interval.stop;
  }, []);

  const config = {
    data,
    height: 400,
    shapeField: "smooth",
    tooltip: { channel: "y", valueFormatter: (d) => d.toFixed(1) + "°C" },
    animate: {
      enter: { type: null },
      update: { type: null },
      exit: { type: null },
    },
    xField: "date",
    yField: "value",
    colorField: "area",
    legend: false,
    axis: {
      x: false,
    },
    scale: {
      x: { type: "time" },
      y: { domain: [15, 30] },
      color: { range: ["#30BF78", "#F4664A", "#FAAD14", "lightblue"] },
    },
    style: {
      lineWidth: 3,
    },
  };

  return <Line {...config} />;
};
